<template>
  <view class="collapse-content">
    <!-- 设备主办 -->
    <view>
      <view>
        <view>设备主办：</view>
        <view>{{ data.sbChargeUser }}</view>
      </view>
      <view>
        <view>记录时间：</view>
        <view>{{ meetingTime(data.sbChargeDateTime) | empty }}</view>
      </view>
      <view>
        <view>工作要求：</view>
        <view>{{ data.sbHandleContent | empty }}</view>
      </view>
      <view class="flex-column no-border">
        <view>图片：</view>
        <view v-if="data.sbFile">
          <image-upload state="view" :imageUrl="data.sbFile"></image-upload>
        </view>
        <view v-else>--</view>
      </view>
      <view class="g"></view>
    </view>

    <!-- 生产主办 -->
    <view>
      <view>
        <view>生产主办：</view>
        <view>{{ data.scChargeUser }}</view>
      </view>
      <view>
        <view>记录时间：</view>
        <view>{{ meetingTime(data.scChargeDateTime) | empty }}</view>
      </view>
      <view>
        <view>工作要求：</view>
        <view>{{ data.scHandleContent | empty }}</view>
      </view>
      <view class="flex-column no-border">
        <view>图片：</view>
        <view v-if="data.scFile">
          <image-upload state="view" :imageUrl="data.scFile"></image-upload>
        </view>
        <view v-else>--</view>
      </view>
      <view class="g"></view>
    </view>

    <!-- 安全主办 -->
    <view>
      <view>
        <view>安全主办：</view>
        <view>{{ data.ahChargeUser }}</view>
      </view>
      <view>
        <view>记录时间：</view>
        <view>{{ meetingTime(data.ahChargeDateTime) | empty }}</view>
      </view>
      <view>
        <view>工作要求：</view>
        <view>{{ data.ahHandleContent | empty }}</view>
      </view>
      <view class="flex-column no-border">
        <view>图片：</view>
        <view v-if="data.ahFile">
          <image-upload state="view" :imageUrl="data.ahFile"></image-upload>
        </view>
        <view v-else>--</view>
      </view>
      <view class="g"></view>
    </view>

    <!-- 综合主办 -->
    <view>
      <view>
        <view>综合主办：</view>
        <view>{{ data.zhChargeUser }}</view>
      </view>
      <view>
        <view>记录时间：</view>
        <view>{{ meetingTime(data.zhChargeDateTime) | empty }}</view>
      </view>
      <view class="flex-column">
        <view style="width: 100%">今日学习文件精神内容：</view>
        <view>{{ data.fileContent | empty }}</view>
      </view>
      <view class="flex-column">
        <view>奖惩情况：</view>
        <view class="js-text">
          <text>奖励{{ data.award || 0 }}(条) </text>
          <text>惩罚{{ data.punishment || 0 }}(条) </text>
          <text>通报{{ data.notice || 0 }}(条) </text>
        </view>
      </view>
      <view>
        <view>工作要求：</view>
        <view>{{ data.zhHandleContent | empty }}</view>
      </view>
      <view class="flex-column no-border">
        <view>图片：</view>
        <view v-if="data.zhFile">
          <image-upload state="view" :imageUrl="data.zhFile"></image-upload>
        </view>
        <view v-else>--</view>
      </view>
      <view class="g"></view>
    </view>
  </view>
</template>
<script>
import dayjs from 'dayjs'
import ImageUpload from '@/components/image-upload/index.vue'
export default {
  props: {
    data: {
      type: Object,
      default: () => ({}),
    },
    isRead: {
      type: Boolean,
      default: false,
    },
    meetingNodeType: {
      type: String,
    },
  },
  computed: {
    meetingTime() {
      return function (time) {
        return time ? dayjs(time).format('YYYY/MM/DD HH:mm') : time
      }
    },
  },
  components: { ImageUpload },
  filters: {
    empty(val) {
      return val || '--'
    },
  },
}
</script>
<style lang="scss" scoped>
.collapse-content {
  margin-bottom: 10px;
  padding-left: 30rpx;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  .js-text {
    text {
      padding-right: 20rpx;
    }
  }
  & > view > view {
    background: #fff;
    padding: 24rpx 0;
    width: 100%;
    display: flex;
    align-items: flex-start;
    font-size: 28rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    border-bottom: 1rpx solid #d5d7e3;

    & view:first-child {
      width: 155rpx;
      //text-align: right;
    }

    & view:last-child {
      flex: 1;
      word-break: break-all;
      color: #666666;
      width: 100%;
    }
  }

  & > view > view:last-child {
    border: 0;
  }

  & > view > .g {
    height: 20rpx;
    background: rgb(245, 245, 245);
    position: relative;
    left: -30rpx;
    width: 100vw;
    padding: 0;
    margin: 0;
  }
}

.flex-column {
  flex-direction: column;

  & view:first-child {
    width: 100%;
    text-align: left !important;
    margin-bottom: 20rpx;
  }
}

.no-border {
  border: 0 !important;
}
</style>
